<template>
  <div class="home">
    <video ref="video" class="video"></video>
    <el-button @click="connnect" type="success">视频通话</el-button>
  </div>
</template>

<script>
// RTCPeerConnection
export default {
  name: 'home',
  data() {
    return {
      localStream: null,
      localVideo: null,
      callButton: false // 连接按钮
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.localVideo = this.$refs.video
    })
  },
  methods: {
    connnect() {
      navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(mediaStream => {
        this.localVideo.srcObject = mediaStream
        this.localStream = mediaStream
        trace('Received local stream.');
        this.callButton = true  // Enable call button.
      }).catch(handleLocalMediaStreamError => {
        condole.log(handleLocalMediaStreamError)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home{
    margin-left: 20px;
    .video {
      width: 520px;
      height: 250px;
      display: block;
      margin-bottom: 10px;
      border: 1px solid #e1e1e1;
    }
  }
</style>
